@import './com';

main {

    .box1 {
        background-color: #8bc01f;
        .content1 {
            .b_one {
                margin-top: 4.1875rem;
                margin-bottom: 5.875rem;
                margin-left: .625rem;
                display: flex;
                align-items: center;
                // justify-content: space-between;
                .left {
                    h2 {
                        color: #fff;
                        font-size: 4rem;
                        &::before {
                            display: inline-block;
                            content: '1';
                            color: #8bc01f;
                            background-color: #fff;
                            width: 5.375rem;
                            height: 5.375rem;
                            text-align: center;
                            font-size: 4rem;
                            line-height: 5.375rem;
                            border-radius: .325rem;
                            vertical-align: middle;
                            margin-right: .8125rem;
                        }
                    }
                    p {
                        margin-top: 1.4375rem;
                        padding-left: .9375rem;
                        color: #fff;
                        font-size: 2.501875rem;
                    }
                    ul {
                        margin-top: 4.25rem;
                        padding-left: .9375rem;
                        li {
                            margin-top: 2.0625rem;
                            color: #fff;
                            width: 45.25rem;
                            font-size: 1.375rem;
                            line-height: 3.5rem;
                        }
                    }
                    button {
                        margin-left: .9375rem;
                        border: none;
                        outline: none;
                        border-radius: .325rem;
                        a {
                            display: inline-block;
                            width: 7.375rem;
                            height: 2.6875rem;
                            color: #8bc01f;
                            text-align: center;
                            line-height: 2.6875rem;
                            background-color: #e8f2d2;
                            border-radius: .325rem;
                            font-size: .875rem;
                        }
                    }
                }

                .right {
                    img {
                        width: 100%;
                    }
                }
            }
        }
    }

    .box2 {
        background-color: #3393df;
        .content2 {
            .b_one {
                margin: 4.625rem 0;
                h2 {
                    color: #fff;
                    font-size: 4rem;
                    &::before {
                    display: inline-block;
                    content: '1';
                    color: #3393df;
                    background-color: #fff;
                    width: 5.375rem;
                    height: 5.375rem;
                    text-align: center;
                    font-size: 5rem;
                    line-height: 5.375rem;
                    border-radius: .325rem;
                    vertical-align: middle;
                    margin-right: .8125rem;
            }
        }
                .one_one {
                    display: flex;
                    justify-content: left;
                    .one_1 {
                        margin-left: 2.9375rem;
                        margin-top: 2.25rem;
                        
                        
                        img {
                            width: 100%;
                        }
                    }
                    .one_2 {
                        margin-top: 2.25rem;
                        margin-left: 2.9375rem;
                        display: flex;
                        flex-direction: column;
                        width: 35.3125rem;
                        height: 33.1875rem;
                        .one_2_1 {
                            div:nth-of-type(1) {
                                color: #fff;
                                font-size: 2.5rem;
                            }
                            div:nth-of-type(2) {
                                color: #fff;
                                width: 30.75rem;
                                height: 15.6875rem ;
                                font-size: 1.45rem;
                                line-height: 2.6875rem;
                            }
                        }
                    }
                    .one_3 {
                        margin-top: 18.75rem;
                        margin-left: 2.625rem;
                        img {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }

    .box3 {
        .content3 {
            .b_one {
                display: flex;
                justify-content: center;
                .one_one {
                    margin: 5rem 0;
                    display: flex;
                    .one_1 {

                        display: flex;
                        flex-direction: column;
                        h2 {
                        color: #3393df;
                        font-size: 3.8rem;
                        &::before {
                            display: inline-block;
                            content: '3';
                            color: #fff;
                            background-color: #3393df;
                            width: 3.5375rem;
                            height: 3.5375rem;
                            text-align: center;
                            font-size: 3rem;
                            line-height: 3.4375rem;
                            border-radius: .325rem;
                            vertical-align: middle;
                            margin-right: .8125rem;
                            }
                        }
                        div:nth-of-type(1) {
                            margin-top: 1.15rem;
                            margin-bottom: 2.5rem;
                            color: #848484;
                            font-size: 1.825rem;
                        }

                        p:nth-of-type(odd) {
                            margin-bottom: 1.4375rem;
                            color: #489be1;
                            font-size: 1.825rem;
                        }
                        p:nth-of-type(even) {
                            text-indent: 2em;
                            width: 47.25rem;
                            height: 4.5rem;
                            line-height: 2.5rem;
                            color: #6b6b6b;
                            font-size: 1.4rem;
                            margin-bottom: 2.3125rem;
                        }
                        div:nth-of-type(2) {
                            text-align: center;
                                width:100%;
                        }
                    }

                    .one_2 {
                        margin-left: 3rem;
                        display: flex;
                        flex-direction: column;
                        h2 {
                        color: #3393df;
                        font-size: 3.8rem;
                        &::before {
                            display: inline-block;
                            content: '4';
                            color: #fff;
                            background-color: #3393df;
                            width: 3.5375rem;
                            height: 3.5375rem;
                            text-align: center;
                            font-size: 3rem;
                            line-height: 3.4375rem;
                            border-radius: .325rem;
                            vertical-align: middle;
                            margin-right: .8125rem;
                            }
                        }
                        div:nth-of-type(1) {
                            margin-top: 1.15rem;
                            margin-bottom: 2.5rem;
                            color: #848484;
                            font-size: 1.825rem;
                        }

                        p:nth-of-type(odd) {
                            margin-bottom: 1.4375rem;
                            color: #489be1;
                            font-size: 1.825rem;
                        }
                        p:nth-of-type(even) {
                            text-indent: 2em;
                            width: 47.25rem;
                            height: 4.5rem;
                            line-height: 2.5rem;
                            color: #6b6b6b;
                            font-size: 1.4rem;
                            margin-bottom: 2.3125rem;
                        }
                        div:nth-of-type(2) {
                            text-align: center;
                                width:100%;
                        }
                    }

                }
            }
        }

    }

    .box4{
        background-color: #f7f7f7;
        .content4 {
            .b_one {
                display: flex;
                justify-content: center;
                .one_one {
                    display: flex;
                    .one_3 {
                        margin: 5rem 0;
                        display: flex;
                        flex-direction: column;
                        h2 {
                        color: #3393df;
                        font-size: 3.8rem;
                        &::before {
                            display: inline-block;
                            content: '5';
                            color: #fff;
                            background-color: #3393df;
                            width: 3.5375rem;
                            height: 3.5375rem;
                            text-align: center;
                            font-size: 3rem;
                            line-height: 3.4375rem;
                            border-radius: .325rem;
                            vertical-align: middle;
                            margin-right: .8125rem;
                            }
                        }
                        div:nth-of-type(1) {
                            margin-top: 1.15rem;
                            margin-bottom: 2.5rem;
                            color: #848484;
                            font-size: 1.825rem;
                        }

                        p:nth-of-type(odd) {
                            margin-bottom: 1.4375rem;
                            color: #489be1;
                            font-size: 1.825rem;
                        }
                        p:nth-of-type(even) {
                            text-indent: 2em;
                            width: 47.25rem;
                            height: 4.5rem;
                            line-height: 2.5rem;
                            color: #6b6b6b;
                            font-size: 1.4rem;
                            margin-bottom: 2.3125rem;
                        }
                        div:nth-of-type(2) {
                            text-align: center;
                                width:100%;
                        }
                    }

                    .one_4 {
                        margin: 5rem 0;
                        margin-left: 3rem;
                        display: flex;
                        flex-direction: column;
                        h2 {
                        color: #3393df;
                        font-size: 3.8rem;
                        &::before {
                            display: inline-block;
                            content: '6';
                            color: #fff;
                            background-color: #3393df;
                            width: 3.5375rem;
                            height: 3.5375rem;
                            text-align: center;
                            font-size: 3rem;
                            line-height: 3.4375rem;
                            border-radius: .325rem;
                            vertical-align: middle;
                            margin-right: .8125rem;
                            }
                        }
                        div:nth-of-type(1) {
                            margin-top: 1.15rem;
                            margin-bottom: 2.5rem;
                            color: #848484;
                            font-size: 1.825rem;
                        }

                        p:nth-of-type(odd) {
                            margin-bottom: 1.4375rem;
                            color: #489be1;
                            font-size: 1.825rem;
                        }
                        p:nth-of-type(even) {
                            text-indent: 2em;
                            width: 47.25rem;
                            height: 4.5rem;
                            line-height: 2.5rem;
                            color: #6b6b6b;
                            font-size: 1.4rem;
                            margin-bottom: 2.3125rem;
                        }
                        div:nth-of-type(2) {
                            text-align: center;
                                width:100%;
                        }
                    }
                }
            }
        }
    }
}

// ipad端
@media screen and (min-width:768px) and (max-width:970px) {
    main {
        .box1 {
            .content1 {
                .b_one {
                    flex-direction: column-reverse;
                    .left {
                        h2 {
                            font-size: 5rem;
                                &::before {
                                    width: 5.375rem;
                                    height: 5.375rem;
                                    line-height: 5.375rem;
                                }
                        }
                        p {
                           font-size: 2rem; 
                        }
                        ul {
                            li {
                                width: 100%;
                                font-size: 1.5rem;
                            }
                        }

                        button {
                            a {
                                display: inline-block;
                                width: 6.375rem;
                                height: 2.1875rem;
                                color: #8bc01f;
                                text-align: center;
                                line-height: 2.1875rem;
                                background-color: #e8f2d2;
                                border-radius: .325rem;
                            }
                        }
                    }
                }
            }
        }

        .box3 {
            .content3 {
                .b_one {
                    .one_one {
                        margin: 3rem 0;
                        .one_1 {
                            width: 100%;
                            display: block;

                            h2 {
                                color: #3393df;
                                font-size: 3.8rem;
                                &::before {
                                    display: inline-block;
                                    content: '3';
                                    color: #fff;
                                    background-color: #3393df;
                                    width: 3.5375rem;
                                    height: 3.5375rem;
                                    text-align: center;
                                    font-size: 3rem;
                                    line-height: 3.4375rem;
                                    border-radius: .325rem;
                                    vertical-align: middle;
                                    margin-right: .8125rem;
                                    }
                                }
                            div:nth-of-type(1) {
                                margin-top: 1.15rem;
                                margin-bottom: 2.5rem;
                                color: #848484;
                                font-size: 1.825rem;
                            }
    
                            p:nth-of-type(odd) {
                                margin-bottom: 1.4375rem;
                                color: #489be1;
                                font-size: 1.825rem;
                            }
                            p:nth-of-type(even) {
                                text-indent: 0em;
                                width: 100%;
                                color: #6b6b6b;
                                font-size: 1.4rem;
                                margin-bottom: 2.3125rem;
                            }
                            div:nth-of-type(2) {
                                text-align: center;
                                    width:100%;
                            }
                        }
    
                        .one_2 {
                            width: 100%;
                            margin-left: 3rem 0;
                            div:nth-of-type(1) {
                                margin-top: 1.15rem;
                                margin-bottom: 2.5rem;
                                color: #848484;
                                font-size: 1.825rem;
                            }
    
                            p:nth-of-type(odd) {
                                margin-bottom: 1.4375rem;
                                color: #489be1;
                                font-size: 1.825rem;
                            }
                            p:nth-of-type(even) {
                                text-indent: 0em;
                                width: 100%;
                                height: 100%;
                                color: #6b6b6b;
                                font-size: 1.4rem;
                                margin-bottom: 2.3125rem;
                            }
                            div:nth-of-type(2) {
                                text-align: center;
                                    width:100%;
                            }
                        }
    
                    }
                }
            }
    
        }
    
        .box4{
            background-color: #f7f7f7;
            .content4 {
                .b_one {
                    display: flex;
                    justify-content: center;
                    .one_one {
                        display: flex;
                        .one_3 {
                            width: 100%;
                            display: block;
                            div:nth-of-type(1) {
                                margin-top: 1.15rem;
                                margin-bottom: 2.5rem;
                                color: #848484;
                                font-size: 1.825rem;
                            }
    
                            p:nth-of-type(odd) {
                                margin-bottom: 1.4375rem;
                                color: #489be1;
                                font-size: 1.825rem;
                            }
                            p:nth-of-type(even) {
                                text-indent: 0em;
                                width: 100%;
                                color: #6b6b6b;
                                font-size: 1.4rem;
                                margin-bottom: 2.3125rem;
                            }
                            div:nth-of-type(2) {
                                text-align: center;
                                    width:100%;
                            }
                        }
    
                        .one_4 {
                            width: 100%;
                            margin-left: 3rem 0;
                            div:nth-of-type(1) {
                                margin-top: 1.15rem;
                                margin-bottom: 2.5rem;
                                color: #848484;
                                font-size: 1.825rem;
                            }
    
                            p:nth-of-type(odd) {
                                margin-bottom: 1.4375rem;
                                color: #489be1;
                                font-size: 1.825rem;
                            }
                            p:nth-of-type(even) {
                                text-indent: 0em;
                                width: 100%;
                                height: 100%;
                                color: #6b6b6b;
                                font-size: 1.4rem;
                                margin-bottom: 2.3125rem;
                            }
                            div:nth-of-type(2) {
                                text-align: center;
                                    width:100%;
                            }
                        }
    
                    }
                }
            }
        }
    }
}

// 移动设备端
@media screen and (max-width:767px) {
    main {
        .box1 {
            .content1 {
                .b_one {
                    margin: 1rem 0;
                    flex-direction: column-reverse;
                    .left {
                        h2 {
                            margin-top: 1rem;
                            font-size: 3rem;
                                &::before {
                                    width: 5.375rem;
                                    height: 5.375rem;
                                    line-height: 5.375rem;
                                }
                        }
                        p {
                           font-size: 1.5rem; 
                        }
                        ul {
                            li {
                                width: 100%;
                                font-size: 1rem;
                            }
                        }

                        button {
                            a {
                                display: inline-block;
                                width: 6.375rem;
                                height: 2.1875rem;
                                color: #8bc01f;
                                text-align: center;
                                line-height: 2.1875rem;
                                background-color: #e8f2d2;
                                border-radius: .325rem;
                            }
                        }
                    }

                    .right {
                        img {
                            display: none;
                        }
                    }
                }
            }
        }

        .box2 {
            .content2 {
                .b_one {
                    margin: 1.625rem 0;
                    h2 {
                        color: #fff;
                            &::before {
                                width: 5.375rem;
                                height: 5.375rem;
                                font-size: 5rem;
                                line-height: 5.375rem;
                        }
                    }
                    .one_one {
                        display: flex; 
                        justify-content: left;
                        .one_1 {
                            margin-left: 0;
                            img {
                                display: none;
                            }
                        }
                        .one_2 {
                            display: flex;
                            flex-direction: column;
                            width: 100%;
                            height: 100%;
                            margin-left: 0;
                            .one_2_1 {
                                div:nth-of-type(1) {
                                    color: #fff;
                                    width: 100%;
                                    height: 100%;
                                    font-size: 2.5rem;
                                }
                                div:nth-of-type(2) {
                                    color: #fff;
                                    width: 100%;

                                    height: 100%;
                                    font-size: 1.45rem;
                                    line-height: 2.6875rem;
                                }
                            }
                        }
                        .one_3 {
                            img {
                                display: none;
                            }
                        }
                    }
                }
            }
        }

        .box3 {
            .content3 {
                .b_one {
                    .one_one {
                        margin: 3rem 0;
                        .one_1 {
                            width: 100%;
                            margin-left: 3rem 0;
                            h2 {
                                color: #3393df;
                                font-size: 2rem;
                                &::before {
                                    display: inline-block;
                                    content: '3';
                                    color: #fff;
                                    background-color: #3393df;
                                    width: 3.5375rem;
                                    height: 3.5375rem;
                                    text-align: center;
                                    font-size: 3rem;
                                    line-height: 3.4375rem;
                                    border-radius: .325rem;
                                    vertical-align: middle;
                                    margin-right: .8125rem;
                                    }
                                }
                            div:nth-of-type(1) {
                                margin-top: 1.15rem;
                                margin-bottom: 2.5rem;
                                color: #848484;
                                font-size: 1.825rem;
                            }
    
                            p:nth-of-type(odd) {
                                margin-bottom: 1.4375rem;
                                color: #489be1;
                                font-size: 1.825rem;
                            }
                            p:nth-of-type(even) {
                                text-indent: 0em;
                                width: 100%;
                                height: 8rem;
                                color: #6b6b6b;
                                font-size: 1.4rem;
                                margin-bottom: 2.3125rem;
                            }
                            div:nth-of-type(2) {
                                display: none;
                            }
                        }
    
                        .one_2 {
                            width: 100%;
                            margin-left: 3rem 0;
                            h2 {
                                color: #3393df;
                                font-size: 2rem;
                                &::before {
                                    display: inline-block;
                                    content: '3';
                                    color: #fff;
                                    background-color: #3393df;
                                    width: 3.5375rem;
                                    height: 3.5375rem;
                                    text-align: center;
                                    font-size: 3rem;
                                    line-height: 3.4375rem;
                                    border-radius: .325rem;
                                    vertical-align: middle;
                                    margin-right: .8125rem;
                                    }
                                }
                            div:nth-of-type(1) {
                                margin-top: 1.15rem;
                                margin-bottom: 2.5rem;
                                color: #848484;
                                font-size: 1.825rem;
                            }
    
                            p:nth-of-type(odd) {
                                margin-bottom: 1.4375rem;
                                color: #489be1;
                                font-size: 1.825rem;
                            }
                            p:nth-of-type(even) {
                                text-indent: 0em;
                                width: 100%;
                                height: 8rem;
                                color: #6b6b6b;
                                font-size: 1.4rem;
                                margin-bottom: 2.3125rem;
                            }
                            div:nth-of-type(2) {
                                display: none;
                            }
                        }
    
                    }
                }
            }
    
        }
    
        .box4{
            background-color: #f7f7f7;
            .content4 {
                .b_one {
                    display: flex;
                    justify-content: center;
                    .one_one {
                        display: flex;
                        .one_3 {
                            width: 100%;
                            margin-left: 3rem 0;
                            h2 {
                                color: #3393df;
                                font-size: 2rem;
                                &::before {
                                    display: inline-block;
                                    content: '3';
                                    color: #fff;
                                    background-color: #3393df;
                                    width: 3.5375rem;
                                    height: 3.5375rem;
                                    text-align: center;
                                    font-size: 3rem;
                                    line-height: 3.4375rem;
                                    border-radius: .325rem;
                                    vertical-align: middle;
                                    margin-right: .8125rem;
                                    }
                                }
                            div:nth-of-type(1) {
                                margin-top: 1.15rem;
                                margin-bottom: 2.5rem;
                                color: #848484;
                                font-size: 1.825rem;
                            }
    
                            p:nth-of-type(odd) {
                                margin-bottom: 1.4375rem;
                                color: #489be1;
                                font-size: 1.825rem;
                            }
                            p:nth-of-type(even) {
                                text-indent: 0em;
                                width: 100%;
                                height: 8rem;
                                color: #6b6b6b;
                                font-size: 1.4rem;
                                margin-bottom: 2.3125rem;
                            }
                            div:nth-of-type(2) {
                                display: none;
                            }
                        }
    
                        .one_4 {
                            width: 100%;
                            margin-left: 3rem 0;
                            h2 {
                                color: #3393df;
                                font-size: 2rem;
                                &::before {
                                    display: inline-block;
                                    content: '3';
                                    color: #fff;
                                    background-color: #3393df;
                                    width: 3.5375rem;
                                    height: 3.5375rem;
                                    text-align: center;
                                    font-size: 3rem;
                                    line-height: 3.4375rem;
                                    border-radius: .325rem;
                                    vertical-align: middle;
                                    margin-right: .8125rem;
                                    }
                                }
                            div:nth-of-type(1) {
                                margin-top: 1.15rem;
                                margin-bottom: 2.5rem;
                                color: #848484;
                                font-size: 1.825rem;
                            }
    
                            p:nth-of-type(odd) {
                                margin-bottom: 1.4375rem;
                                color: #489be1;
                                font-size: 1.825rem;
                            }
                            p:nth-of-type(even) {
                                text-indent: 0em;
                                width: 100%;
                                height: 8rem;
                                color: #6b6b6b;
                                font-size: 1.4rem;
                                margin-bottom: 2.3125rem;
                            }
                            div:nth-of-type(2) {
                                display: none;
                            }
                        }
    
    
                    }
                }
            }
        }
    }
} 